<!-- 子组件示例：展示如何通过 emit 向父组件传递数据 -->
<script setup>
// 从 Vue 中导入 ref 用于创建响应式数据
import { ref } from "vue";

// 定义组件可以触发的自定义事件
// "updateCount" 是事件名称，父组件可以通过 @updateCount 监听该事件
const emit = defineEmits(["updateCount"]);

// 创建响应式数据 count，初始值为 1
// 用于记录组件内部的计数状态
const count = ref(1)

// 定义点击事件处理函数 add
const add = () => {
    // 每次点击将 count 的值加 1（修改响应式数据需通过 .value 访问）
    count.value++

    // 触发自定义事件 updateCount，并传递参数 2 给父组件
    // 父组件可以通过事件监听获取这个参数
    emit("updateCount", 2)
}
</script>

<template>
    <!-- 显示当前 count 的值 -->
    <p>count值为：{{count}}</p>

    <!-- 按钮绑定 click 事件，点击时执行 add 函数 -->
    <!-- 按钮文字 "+n" 表示点击后会执行计数相关操作 -->
    <button @click="add">+n</button>
</template>

<style scoped>
/* scoped 属性确保样式仅作用于当前组件 */
/* 可以添加按钮和文本的样式美化组件 */
button {
    padding: 4px 8px;
    margin-top: 8px;
    cursor: pointer;
}

p {
    margin: 0;
}
</style>